import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
import 'package:sainbainu/common/models/response/group_list_response.dart';
import 'package:sainbainu/common/values/colors.dart';
import 'package:sainbainu/common/widgets/custom_image.dart';

import 'index.dart';
import 'widgets/widgets.dart';

class GroupListPage extends GetView<GroupListController> {
  const GroupListPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<GroupListController>(
      builder: (_) {
        return Scaffold(
          appBar: AppBar(title: const Text("更多小组")),
          body: EasyRefresh.builder(
            controller: _.state.groupRefreshController,
            onLoad: _.onGroupRichBottom,
            childBuilder: (context, physics) {
              return _buildList(physics);
            },
          ),
        );
      },
    );
  }

  /// 小组列表
  Widget _buildList(ScrollPhysics physics) {
    return GetBuilder<GroupListController>(
      id: 'groupList',
      builder: (_) {
        return ListView.separated(
          physics: physics,
          itemCount: _.state.groupListResponse.rows.length,
          separatorBuilder: (BuildContext context, int index) {
            return const SizedBox(height: 10);
          },
          padding: const EdgeInsets.all(0),
          itemBuilder: (BuildContext context, int index) {
            var item = controller.state.groupListResponse.rows[index];
            return GestureDetector(
              onTap: () => _.toGroupDetailPage(
                item.groupId,
                item.uniqueTag,
                item.cover,
              ),
              child: Container(
                color: Colors.white,
                padding: const EdgeInsets.symmetric(
                  vertical: 10,
                  horizontal: 15,
                ),
                child: _buildGroupItem(item),
              ),
            );
          },
        );
      },
    );
  }

  /// 单个小组 item
  Widget _buildGroupItem(CroupItemResponse item) {
    return SizedBox(
      height: 48,
      child: Row(
        children: [
          Hero(
            tag: '${item.uniqueTag}_${item.groupId}',
            child: ClipRRect(
              borderRadius: BorderRadius.circular(6),
              child: SizedBox(
                width: 48,
                height: 48,
                child: CustomImage(
                  url: item.cover ?? '',
                ),
              ),
            ),
          ),
          const SizedBox(width: 10),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text(
                  item.groupName ?? '',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(
                    fontSize: 16,
                    color: AppColors.active,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Text(
                  '${item.memberNum ?? 0} 人已加入 · ${item.noteNum ?? 0} 帖子',
                  style: const TextStyle(
                    fontSize: 11,
                    color: AppColors.unactive,
                  ),
                ),
              ],
            ),
          ),
          JoinBtn(
            onJoin: () => controller.handleJoin(item.groupId),
          ),
        ],
      ),
    );
  }
}
